<div>
    <div class="processInfoTitle">
        <div class="listItem pf_item" data-o2-events="o2load:loadItemFlag">
            <div class="listItemApplication pf_application">
                <div class="listItemApplicationIcon" data-o2-events="o2load:loadItemIcon:{{$.data.item.application}}"></div>
                <div class="listItemApplicationText pf_applicationText" title="{{$.data.item.applicationName}}">{{$.data.item.applicationName}}</div>
            </div>
            <div class="listItemLine"></div>

            <div class="listItemFlag">
                {{if $.data.item.allowRapid}}
                <div class="rapidEditor o2icon-bianji" data-o2-events="click:editTask" title="{{$.lp.rapidEditor}}"></div>
                {{end if}}
                {{if $.type=='read'}}
                <div class="rapidEditor o2icon-daiyue" data-o2-events="click:setReadCompleted" title="{{$.lp.setReadCompleted}}"></div>
                {{end if}}
            </div>
            <div class="pf_listItemActivity">
                {{if $.type=='taskCompleted'}}
                <div class="listItemActivityText" title="{{$.lp.processActivityInfo}}:{{$.data.item.activityName}}">
                    <span>{{$.lp.processActivity}}</span><br/><span class="mainColor_color">{{$.data.item.activityName}}</span>
                </div>
                {{end if}}

                {{if $.type=='read' ||  $.type=='readCompleted'}}
                <div class="listItemActivityText" title="{{$.lp.readActivityInfo}}:{{$.data.item.activityName}}">
                    <span>{{$.lp.readActivity}}</span><br/><span class="mainColor_color">{{$.data.item.activityName}}</span>
                </div>
                {{end if}}
            </div>

            <div class="listItemTitle" data-o2-events="click:openJob">
                <div class="listItemTitleProcess pf_titleProcess" title="{{$.data.item.processName}}">
                    <div class="listItemTitleFlag">【</div>
                    <div class="listItemTitleProcessText">{{$.data.item.processName}}</div>
                    <div class="listItemTitleFlag">】</div>
                </div>
                <div class="listItemTitleSubject">
                    <div>{{$.data.item.title}}</div>
                </div>
            </div>
        </div>
    </div>
    <div class="processInfoContent">
        <div class="pf_workLog">
            {{each $.data.workLogList}}

                {{if $.fromActivityType==="begin"}}
                <div style="height: 50px">
                    <div style="height: 50px; width: 40px; float: left">
                        <div class="pf_icon o2icon-point mainColor_color" style="color: #4eb547!important; margin-top: 17px"></div>
                        <div style="width: 1px; height: 17px; background-color: #E6E6E6; margin: auto;"></div>
                    </div>
                    <div style="height: 50px; margin-left: 40px; margin-right:30px; border-bottom: 1px solid #E6E6E6">
                        <div class="pf_fromActivityName" style="float: left; line-height: 50px">{{$.fromActivityName}}</div>
                        <div class="pf_arrivedTime" style="margin-left: 20px; float: left; line-height: 50px">{{$.arrivedTime.substring(0,15)}}</div>
                    </div>
                </div>
                {{end if}}

                {{if $.fromActivityType!=="begin"}}
                <div class="pf_logItem">
                    <div class="pf_itemLeft">
                        <div class="pf_lineTop"></div>
                        <div class="pf_icon o2icon-point mainColor_color"></div>
                        <div class="pf_lineBottom"></div>
                    </div>
                    <div class="pf_itemActivity">
                        <div class="pf_fromActivityName">{{$.fromActivityName}}</div>
                        <div class="pf_routeName">{{$.routeName}}</div>
                        <div class="pf_arrivedTime">{{$.arrivedTime.substring(0,15)}}</div>
                    </div>
                    <div class="pf_itemOpinionMore" data-o2-events="click:moreWorkLog">
                        {{if $.taskList.concat($.taskCompletedList).length>3}}
                        <span>...</span>
                        {{end if}}
                    </div>
                    <div class="pf_itemOpinion" data-o2-events="click:moreWorkLog">
                        <div class="pf_itemOpinionArea">
                        {{each $.taskList.concat($.taskCompletedList).slice(0,3).reverse() }}
                            <div class="pf_itemOpinionIconArea" data-o2-events="o2load:attachShowPersonLog">
                                <img class="pf_itemOpinionIcon" src="{{o2.Actions.getHost('x_organization_assemble_control')}}/x_organization_assemble_control/jaxrs/person/{{encodeURIComponent($.person)}}/icon" />
                                <div class="pf_itemOpinionPerson">{{o2.name.cn($.person)}}</div>
                                {{if $.completedTime}}
                                <icon class="pf_itemOpinionIconFlag o2icon-xuanzhong"></icon>
                                {{end if}}
                            </div>
                        {{end each}}
                        </div>
                    </div>

                </div>
                {{end if}}

                {{if $.arrivedActivityType==="end" || $.arrivedActivityType==="cancel"}}
                <div style="height: 50px">
                    <div style="height: 50px; width: 40px; float: left">
                        <div style="width: 1px; height: 17px; background-color: #E6E6E6; margin: auto;"></div>
                        <div class="pf_icon o2icon-point mainColor_color" style="color: #ca6331!important;"></div>
                    </div>
                    <div style="height: 50px; margin-left: 40px; margin-right:30px; border-bottom: 1px solid #E6E6E6">
                        <div class="pf_fromActivityName" style="float: left; line-height: 50px">{{$.arrivedActivityName}}</div>
                        <div class="pf_arrivedTime" style="margin-left: 20px; float: left; line-height: 50px">{{$.arrivedTime.substring(0,15)}}</div>
                    </div>
                </div>
                {{end if}}

            {{end each}}
        </div>
        <div class="pf_workList">
            <div class="pf_workListArea">
                {{each $.data.workList}}
                <div class="pf_workListItem">
                    <div style="height: 24px; line-height: 24px;">
                        <div style="float: left">{{$.activityArrivedTime.substring(0,16)}}</div>
                        <button style="float: right" class="mainColor_color mainColor_border pf_button" data-o2-events="click:openWork">{{$._.lp.open}}</button>
                    </div>
                    <div><span style="color:#333333">{{$._.lp.workFlowTo}}</span><span class="mainColor_color">[{{$.activityName}}]</span></div>
                    <div><span style="color:#333333">{{$._.lp.taskPerson}}</span>
                        <span style="font-size: 12px">
                            {{(function(){
                                var taskList = [];
                                $._.data.workLogList.forEach(function(log){
                                    if (log.work===$.id){
                                        if (log.taskList && log.taskList.length){
                                            log.taskList.forEach(function(task){
                                                taskList.push(o2.name.cn(task.person)+"("+o2.name.cn(task.unit)+")");
                                            });
                                        }
                                    }
                                });
                                return taskList.join(", ");
                            })()}}
                        </span>
                    </div>
                </div>
                {{end each}}

                {{each $.data.workCompletedList}}
                <div class="pf_workListItem">
                    <div style="height: 24px; line-height: 24px;">
                        <div style="float: left">{{$.completedTime.substring(0,16)}}</div>
                        <button style="float: right" class="mainColor_color mainColor_border pf_button" data-o2-events="click:openWork">{{$._.lp.open}}</button>
                    </div>
                    <div><span style="color:#333333">{{$._.lp.workFlowTo}}</span><span class="mainColor_color">[{{$.activityName}}]</span></div>
                </div>
                {{end each}}
            </div>
        </div>
    </div>
</div>
